<template>
  <div class="bar-stack-container">
    <div id="bar-stack" class="bar-stack" />
  </div>
</template>

<script>
import { loadBMap } from "@/utils/map";
import dataApi from "@/api/data";
export default {
  props: {
    city: String,
    parent_items:Array
  },
  watch: {
    city(val) {
      this.child_city = val;
      this.initchart()
    },
    parent_items(val){
      this.items = val
      this.initchart()
    }
  },
  data() {
    return {
      chart: null,
      dataList: [],
      items: [],
      child_city: "北京",
      years: ["2013", "2014", "2015", "2016", "2017", "2018"],
      staItems: ["天然林面积", "人工林面积", "天然林蓄积", "人工林蓄积"],
    };
  },
  mounted() {
    // dataApi.getData().then((res) => {
    //   this.items = res.data.items;
    //   // 初始化图表
    //   this.initchart();
    // });
  },
  methods: {
    initchart() {
      this.chart = this.$echarts.init(document.getElementById("bar-stack"));
      let option = this.setChart(this);
      this.chart.setOption(option);

      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart(that) {
        let data0 = that.getSeriesData(that.child_city, that.staItems[0])
        let data1 = that.getSeriesData(that.child_city, that.staItems[1])
        let option = {
        backgroundColor: "#282a36",
        angleAxis: {
          type: "category",
          data: that.years,
          axisLine:{
              show:true,
              lineStyle:{
                  color:'rgb(238, 197, 102)'
              }, 
          }
        },
        radiusAxis: {
            max: that.getMax(data0,data1),
            min: that.getMin(data0,data1),
            axisLine:{
                lineStyle:{
                    color: 'rgb(238, 197, 102)'
                }
            },
            axisLabel: {
                formatter: (value)=>{
                    return value.toFixed(1)
                },
                color: '#fff'
              }
        },
        title: {
          text:  that.child_city + "林地面积统计",
          left: "left",
          top: "0",
          textStyle: {
            color: "rgb(238, 197, 102)",
            fontSize:14
          },
        },
        tooltip:{},
        polar: {},
        series: [
          {
            type: "bar",
            data: data0,
            coordinateSystem: "polar",
            name: that.staItems[0],
            stack: "a",
            itemStyle: {
              color:new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fdfe00'
                }, {
                    offset: 1,
                    color: 'rgba(255, 185, 0,0.1)'
                }])
            },
          },
          {
            type: "bar",
            data: data1,
            coordinateSystem: "polar",
            name: that.staItems[1],
            stack: "a",
            itemStyle: {
              color:new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#248ff7'
                }, {
                    offset: 1,
                    color: 'rgba(22,75,247,0.1)'
                }])
            },
          },
        ],
        legend: {
          show: true,
          orient: 'vertical', //垂直显示
          left:'right',
          top:'20',
          data: [that.staItems[0], that.staItems[1]],
          textStyle:{
              color:"#fff"
          }
        },
      };
      return option;
    },
    getMax(a,b){
      let data = a.concat(b)
      //console.log(data);
      let max =  Number.MIN_VALUE
      data.forEach(element => {
          if(element > max){
              max = element
          }
      });
      return max
    },
    getMin(a,b){
        let data = a.concat(b)
        let min =  Number.MAX_VALUE
        data.forEach(element => {
          if(element < min){
              min = element
          }
        });
        return min
    },
    getSeriesData(city, item) {
      let res = [];
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i]["city"] === city) {
          res.push(Number(this.items[i][item]));
        }
      }
      return res;
    },
   resizeChart(){
        this.chart.resize()
    }
  },
};
</script>

<style>
.bar-stack {
  width: 100%;
  height: calc(30vh);
}
</style>